<template>
  <ul>
    <li
      v-for="(item, index) in todySum"
      :key="index"
      @click="gopath(item.path)"
    >
      <div class="info">{{ item.total }}</div>
      <div class="title">{{ item.title }}</div>
    </li>
  </ul>
</template>
<script>
export default {
  props: ["financialData"],
  watch: {
    financialData: {
      deep: true,
      handler (nv, ov) {
        if (Object.keys(nv).length > 0) {
          this.todySum.map(item => {
            item.total = nv[item.key]
          })
        }
      }
    }
  },
  data () {
    return {
      todySum: [{
        title: '今日预约(台次)',
        total: 0,
        key: 'subscribeNum',
        path:'/customer-center/appointment',
      },
      {
        title: '今日接待(台次)',
        total: 0,
        key: 'pickCarNum',
        path:'/workOrderManage/pickUpOrder',
      },
      {
        title: '今日维修(台次)',
        total: 0,
        key: 'maintainNum',
        path:'/workOrderManage/comprehensive',
      },
      {
        title: '今日结算(台次)',
        total: 0,
        key: 'payNum',
        path:'/workOrderManage/order-manage',
      },
      ],
    }
  },
  methods:{
    gopath(path){
      this.$router.push({
        path,
        query:{}
      })
    }
  }
}

</script>

<style lang="scss" scoped>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 290px;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  li {
    height: 45%;
    width: 45%;
    border-radius: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .info {
      color: #333333;
      font-family: DIN;
      font-weight: bold;
      font-size: 40px;
    }

    .title {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      margin-top: 15px;
    }
  }
}
</style>
